//import { createApp } from 'vue'
//import App from './App.vue'
//import './assets/base.css'
//import './assets/main.css'

//createApp(App).mount('#app')

async function fetchData(url) {
  try {
    const res = await fetch(url);
    return await res.json();
  } catch (err) {
    console.error("Error fetching", url, err);
    return [];
  }
}

function renderCards(containerId, items, type) {
  const container = document.getElementById(containerId);
  container.innerHTML = "";

  if (!items || items.length === 0) {
    container.innerHTML = `<p>No ${type} found.</p>`;
    return;
  }

  items.forEach(item => {
    const div = document.createElement("div");
    div.className = "card";
    div.innerHTML = `
      <h3>${item.name || "Unnamed"}</h3>
      <p><strong>Status:</strong> ${item.status || "Unknown"}</p>
    `;
    container.appendChild(div);
  });
}

async function init() {
  const nodes = await fetchData("/api/nodes");
  renderCards("nodes", nodes, "nodes");

  const pods = await fetchData("/api/pods");
  renderCards("pods", pods, "pods");
}

init();
